<template>
    <div class="mui-content commentList mui-scroll-wrapper" id="pullrefresh" v-if="commentList.length!=0">
        <div class="mui-scroll">
            <!--数据列表-->
            <ul class="mui-table-view mui-table-view-chevron mgb1" v-for="comment in commentList">
                <li class="mui-table-view-cell evaluateTitle">
                    <p class="col-8 text3-size color2 mui-ellipsis">{{comment.commentObject}}</p>
                    <p class="col-4 mui-text-right mui-pull-right  banpenEvaluate text3-size color4">{{comment.commentType | commentTypeFilter}}</p>
                </li>
                <li class="mui-table-view-cell evaluateText">
                    <p class="text2">{{comment.commentContent}}</p>
                </li>
                <li class="mui-table-view-cell">
                    <p class="col-8">
                        <span class="text3-size color2">综合评分：</span>
                        <span>
                    <span class="score text2-size color4">{{comment.commentScore|toDou}}</span>
                    <span class="separate text2-size color1">/</span>
                    <span class="totalScore text2-size color1">5.0</span>
                </span>
                    </p>
                    <p class="col-4 mui-text-right text3">{{comment.commentTime}}</p>
                </li>
            </ul>
        </div>
        <!--没有评价-->
    </div>
    <div class="notEvaluate">
        <div class="evaluateIcon mui-text-center">
            <i class="icon-daipingjia color7 text6-size"></i>
        </div>
        <p class="evaluateText mui-text-center color2 text2-size">您还没有相关评价</p>
        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined viewEvaluateBtn text2-size" v-link="{name:'orderList',params:{tab:'needComment'}}">去评价</button>
    </div>
</template>
<style>
    .notEvaluate .evaluateIcon{width:1.2rem;height: 1.2rem; background-color: #d1d2d4; border-radius: 100%;  margin: 2rem auto 0.2rem;}
    .notEvaluate p{margin-bottom:0;}
    .notEvaluate .evaluateIcon i{line-height: 1.2rem;}
    #pullrefresh .mui-scroll>ul:first-child{margin-top: 0.2rem;}

</style>
<script type="text/ecmascript-6">
    import '../../fonts/mui.css';
    import { API } from '../../config/constants'
    import Page from '../../base/Page'
    export default new Page({
        data(){
            return{
                commentList:[],
            }
        },
        ready () {
            this.getJSON(API.LIST_COMMENT, {}, res => {
                this.commentList = res.resultData;
            });

            /*mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        callback: this.pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: this.pullupRefresh
                    }
                }
            });*/
            mui('.mui-scroll-wrapper').scroll({
                indicators: true, //是否显示滚动条
                deceleration : 0.0005,
            });
        },
        methods:{
            /* 下拉刷新具体业务实现*/
            pulldownRefresh:function () {
                setTimeout(function(){
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                }, 1500);
            },
            pullupRefresh:function () {
                setTimeout(function() {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                }, 1500);
            }

        }
    })

</script>